<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      default-active="onRoutes" background-color="#545c64" text-color="#fff"
      active-text-color="#ffd04b" :collapse="collapse"
      router
    >

        <template v-for="item in items" >
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </el-menu-item>

        </template>



    </el-menu>
  </div>
</template>

<script>
import bus from "../assets/js/bus";
export default {
  name:"TheAside",
  data() {
    return {
      collapse: false,
      items:[
        {

          icon:'el-icon-document',
          index:'Info',
          title:'系统首页'
        },
        {

          icon:'el-icon-document',
          index:'Consumer',
          title:'用户管理'
        },
        {

          icon:'el-icon-document',
          index:'Singer',
          title:'歌手管理'
        },
        {

          icon:'el-icon-document',
          index:'SongList',
          title:'歌单管理'
        },
      ]
    }
  },
  created() {

  },
  computed:{
    onRoutes(){
      return this.$route.path.replace('/','');
    }
  },
  methods: {

  }
}
</script>

<style scoped>
.sidebar{
  height: 100%;
  background-color: #545c64;
}


</style>
